require(['./config'],()=>{
	require(['template','header','elevateZoom','footer','jquery','fly'],(template,header,elevateZoom)=>{
		class Detail{
			constructor(){
				this.render().then(()=>{
					this.jqueryEz()
					this.addToCar()
					this.change()
				})
			}
			jqueryEz (){
				$('.zoom-image').elevateZoom({
				    gallery: 'gal1', // 放所有小图容器盒子ul的id，不加#
				    // cursor:"crosshair", //鼠标样式 默认值: default 允许值: default, cursor, crosshair
					borderSize:"2",//显示放大部分的区域的边框粗细
				    borderColour:"#FFFF00", //放大部分的区域的边框颜色
				    lensBorderSize:"0", //透镜的边框像素
				    lensColour:"yellow", //透镜的背景色
				    lensOpacity:"0.4" //透镜透明度
					// lensShape: "round",//透镜形状
					// lensSize: 200,//透镜尺寸：长和宽：200px
					// zoomWindowFadeIn: 500,//镜头窗口淡入速度 
					// zoomWindowFadeOut: 500,//镜头窗口淡出速度 
					// lensFadeIn: 500,//透镜淡入速度 
					// lensFadeOut: 500//透镜淡出速度
				})
			}
			render(){
				//从地址栏获取id，根据id获取详情页面
				const id=location.search.slice(4)
				return new Promise(resolve=>{
					$.get('http://www.xiongmaoyouxuan.com/api/detail',{id},resp=>{
						if(resp.code===200){
							const {
								id,
								photo,
								title,
								originPrice,
								price,
								couponStatus,
								couponValue,
								descContentList
							}=resp.data.detail
							
							this.detail={
								id,
								photo,
								title,
								originPrice,
								price,
								couponStatus,
								couponValue,
								descContentList
							}
							
							$('#design').html(
							template('designTemplate',{
								...this.detail
							}))
							resolve()
						}
					})
				})
				
			}
			addToCar(){
				$('#add').on('click',(e)=>{
					this.fly(e)
					let car=localStorage.getItem('car')
					if(car){
						car=JSON.parse(car)
						const isExist=car.some(shop=> shop.id===this.detail.id)
						if(isExist){
							car=car.map(shop=>{
								if(shop.id===this.detail.id){
									shop.count++
								}
								return shop
							})
						}else{
							car.push({
							...this.detail,
						count:1,
						check:true
						})
						}
						localStorage.setItem('car',JSON.stringify(car))
					}else{
						localStorage.setItem('car',JSON.stringify([{
						...this.detail,
						count:1,
						check:true
						}]))
					}
				})
			}
			fly(e){
				$(`<img class="fly" src="${this.detail.photo[0].url}">`).fly({
				  start:{
				    left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
				    top: e.clientY,  //开始位置（必填）
				  },
				  end:{
				    left: $('#shopcar').offset().left - $(window).scrollLeft(), //结束位置（必填）
				    top: $('#shopcar').offset().top - $(window).scrollTop()  //结束位置（必填）
				     // width: 100, //结束时高度
				     // height:100, //结束时高度
				  },
				  // autoPlay: false, //是否直接运动,默认true
				  speed: 1, //越大越快，默认1.2
				  vertex_Rtop: 80, //运动轨迹最高点top值，默认20
				  onEnd: function(){
				    this.destroy()
				    // 重新计算购物车总数量
				    // 接收header对象调用header的方法实现计算
				    header.calcCarCount()
				  } //结束回调
				})
			}
			change(){
				$(function() {
						// 当页面向下滑动 600px 出现"返回顶部" 按钮
						$(window).scroll(function() {
							if($(window).scrollTop() >600) {
								$('#top').css('display', 'block')
							} else {
								$('#top').css('display', 'none')
							}
						})
						 // 点击按钮，返回页面顶部
						$("#top").on("click", function() {
							$("html").animate({
								scrollTop: 0
							}, 500)
						})
						
						
				})
			}
		}
		new Detail()
	})
})